<!-- 组件的结构 -->
<template>
<div class="demo">
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
</div>
</template>

// 组件交互相关的代码（数据、方法等等）
<script>
// 第一种：分别暴露
//    export const school = Vue.extend({
//         name:'school',  //使用name配置项指定组件在开发中工具中显示的组件名称，如果没写就显示注册时的名称
//         data(){
//         return {
//             schoolName:'上海一中',
//             address:'上海'
//         }
//         },
//         methods: {
//         },
//     })
//     // 第二种：统一暴露
//     export {school}
//     // 第三种：默认暴露
//     export default school

    // 最简化暴露--使用默认暴露，并去掉Vue.extend
    export default {
        name:'School',  //组件名最好和文件名保持一致
        data(){
            return {
                schoolName:'上海一中',
                address:'上海'
            }
        },
        methods: {
        }
    }
</script>

// 组件的样式
<style scoped>
.demo{
    background-color: orange;
}
</style>
